<template>
    <div>
        <breadcrumb :title="'资源编目'" :noBack="true"></breadcrumb>
        <div class="white-block box mt20" v-loading="loading">
            <div class="toolbar">
                <div>
                    <el-input v-model="resName" placeholder="输入资源名称" class="input short mr10" size="small"></el-input>
                    <el-select v-model="department" placeholder="所属部门" class="select short mr10" size="small">
                        <el-option
                            v-for="item in departmentOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="shareType" placeholder="共享方式" class="select short mr10" size="small">
                        <el-option
                            v-for="item in shareTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="refresh" placeholder="全部更新频率" class="select short mr10" size="small">
                        <el-option
                            v-for="item in refreshOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-date-picker v-model="searchTime" size="small" class="short mr10"
                        type="daterange"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button class="primary" @click="getList()" size="small">查询</el-button>
                    <el-button class="minor" @click="reset()" size="small">重置</el-button>
                </div>
                <div class="text-right">
                    <el-button type="primary" size="small">新增</el-button>
                </div>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20" ref="table">
                <template slot="userName" slot-scope="scope">
                    <span>{{scope.row.userName}}</span>
                    <div v-if="scope.row.deptName">
                        <el-button class="primary limit text" size="small">{{scope.row.deptName}}</el-button>
                    </div>
                </template>
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false" class="mr10" @click="openEdit(scope.row)">修改</el-link>
                    <el-link type="primary" :underline="false" class="mr10" @click="openDetail(scope.row)">查看</el-link>
                    <el-link type="primary" :underline="false" @click="cancelList(scope.row)">删除</el-link>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page" @jumpPage="getList"></page>
        </div>
        <transition name="slide">
            <router-view @upload="getList"></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {

        data() {
            return {
                departmentOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '所属部门',
                        value: '1'
                    }
                ],
                shareTypeOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '公开',
                        value: '1'
                    },
                    {
                        label: '受限',
                        value: '2'
                    },
                    {
                        label: '部门所有',
                        value: '3'
                    }
                ],
                refreshOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '实时',
                        value: '1'
                    },
                    {
                        label: '每天',
                        value: '2'
                    },
                    {
                        label: '每月',
                        value: '3'
                    },
                    {
                        label: '每季度',
                        value: '4'
                    },
                    {
                        label: '每半年',
                        value: '5'
                    },
                    {
                        label: '每年',
                        value: '6'
                    },
                    {
                        label: '不更新',
                        value: '7'
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'version',
                        label: '版本号',
                        minWidth: '15%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'department',
                        label: '所属部门',
                        minWidth: '15%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'shareType',
                        label: '共享方式',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'refresh',
                        label: '更新频率',
                        width: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'time',
                        label: '编目时间',
                        width: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '25%',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'userName'],
                data: {},
                loading: false,
                index: 1,
                resName: '',
                department: '',
                shareType: '',
                refresh: '',
                searchTime: '',
                show: false
            }
        },
        mounted() {
            // this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                // this.$http.get('/dept/workbench/pageOrder', {
                this.$http.get('/dept/workbench/getUserOrderList', {
                    current: this.index || 1,
                    size: 10,
                    resName: this.resName
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.resName = ''
                this.department = ''
                this.shareType = ''
                this.refresh = ''
                this.searchTime = ''
                // this.getList(1)
            },
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        itemId: row.itemId
                    }
                })
            },
            openEdit(row) {
                this.$router.push({
                    path: this.$route.path + '/edit',
                    query: {
                        itemId: row.itemId
                    }
                })
            },
            cancelList(row) {
                this.loading = true
                this.$http.post('/dept/workbench/revoke', {
                    itemId: row.itemId
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        row.state = 5
                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page
        }
    }
</script>

<style scoped lang="less">
    .box {

        .button {
            border: none;
            background-color: #fff;
            color: #1497fc;
        }
    }
</style>
